<template>
  <el-row justify="center" :align="middle" style="height: 100vh;">
    <el-card style="width: 400px; margin: 20px;">
      <template #header>
        <div class="card-header">{{ FormTest ? '注册' : '登录' }}</div>
      </template>
      <el-form ref="LoginFormRef" :model="LoginForm" :rules="rules" label-width="auto" style="max-width: 100%">
        <el-form-item label="账号" prop="username">
          <el-input v-model="LoginForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="LoginForm.password" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="footer-content">
          <el-button type="primary" style="width: 100%;" @click="submitForm">{{ FormTest ? '注册' : '登录' }}</el-button>
          <el-link @click="LoginClick">{{ FormTest ? '返回登录' : '前往注册' }}</el-link>
        </div>
      </template>
    </el-card>
  </el-row>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router';
import api from '../services/api'
import { ElMessage } from 'element-plus';

const router = useRouter();
const LoginFormRef = ref();
const LoginForm = reactive({
  username: 'abc',
  password: '123456'
})
const FormTest = ref(0) // 0表示登录，1表示注册

const LoginClick = () => {
  FormTest.value = FormTest.value ? 0 : 1;
}

const rules = reactive({
  username: [{
    validator: (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        phoneReg.test(value) ? callback() : callback(new Error('手机号输入有错误'))
      }
    }, trigger: 'blur'
  }],
  password: [{
    validator: (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        const reg = /^\S{6,15}$/
        reg.test(value) ? callback() : callback(new Error('密码输入有误，需要6-15位字符'))
      }
    }, trigger: 'blur'
  }]
});

const submitForm = async () => {
  try {
    // 验证表单
    await LoginFormRef.value.validate();

    try {
      let response;
      
      if (FormTest.value) {
        // 注册逻辑
        response = await api.register(LoginForm);
        if (response.data === "success") {
          ElMessage.success('注册成功');
          FormTest.value = 0; // 注册成功后切换到登录界面
        } else {
          ElMessage.error('注册失败，用户名可能已存在');
        }
      } else {
        // 登录逻辑
        response = await api.login(LoginForm);
        if (response.data.flag == "ok") {
          window.sessionStorage.setItem("user", JSON.stringify(response.data.user));
          ElMessage.success('登录成功');
          router.push('/Home');
        } else {
          ElMessage.error('登录失败，用户名或密码错误');
        }
      }
    } catch (error) {
      ElMessage.error(FormTest.value ? '注册失败' : '登录失败');
      console.error(error);
    }
  } catch (error) {
    ElMessage.error('表单信息填写有误，请检查');
  }
};
</script>

<style scoped>
.el-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
</style>